<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>修改供应商</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css" />
    <link rel="stylesheet" href="../css/reset.css?3123" />
    <link rel="stylesheet" href="../css/setlayui.css?12" />
    <link rel="stylesheet" href="../css/viewer.min.css" />
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none" v-show="showApp">
        <div class="contetn_box">
            <div class="cell_box">
                <div class="cell_title">
                    <div class="cell_name">基本信息:</div>
                </div>
                <div class="cell_cont">
                    <div class="form_box" style="margin-top: 0;width: 100%;">
                        <div class="form_name must_input">类型</div>
                        <div class="form_cont">
                            <el-checkbox-group v-model="checkArr" class="public_input">
                                <el-checkbox v-for="(item, index) in gysTypeData" :key="index" :label="item.id">
                                    {{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name must_input">名称</div>
                        <div class="form_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!info.name" :content="info.name"
                                placement="top">
                                <el-input placeholder="请输入内容" v-model="info.name" clearable class="public_input">
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name must_input">负责人</div>
                        <div class="form_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!info.principalName"
                                :content="info.principalName" placement="top">
                                <el-input placeholder="请输入内容" v-model="info.principalName" clearable
                                    class="public_input"></el-input>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name must_input">负责人电话</div>
                        <div class="form_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!info.principalPhone"
                                :content="info.principalPhone" placement="top">
                                <el-input placeholder="请输入内容" v-model="info.principalPhone" clearable
                                    class="public_input"></el-input>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name must_input">联系人</div>
                        <div class="form_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!info.linkName" :content="info.linkName"
                                placement="top">
                                <el-input placeholder="请输入内容" v-model="info.linkName" clearable class="public_input">
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name must_input">联系人电话</div>
                        <div class="form_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!info.linkPhone" :content="info.linkPhone"
                                placement="top">
                                <el-input placeholder="请输入内容" v-model="info.linkPhone" clearable class="public_input">
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cell_box" style="margin-top: 2.88vh">
                <div class="cell_title">
                    <div class="cell_name">发票信息:</div>
                </div>
                <div class="cell_cont">
                    <div class="form_box" style="margin-top: 0;">
                        <div class="form_name ">发票抬头</div>
                        <div class="form_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!info.invoice" :content="info.invoice"
                                placement="top">
                                <el-input placeholder="请输入内容" v-model="info.invoice" clearable class="public_input">
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="form_box" style="margin-top: 0;">
                        <div class="form_name ">营业执照编码</div>
                        <div class="form_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!info.buslicense"
                                :content="info.buslicense" placement="top">
                                <el-input placeholder="请输入内容" v-model="info.buslicense" clearable class="public_input">
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name ">开户银行</div>
                        <div class="form_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!info.bankName" :content="info.bankName"
                                placement="top">
                                <el-input placeholder="请输入内容" v-model="info.bankName" clearable class="public_input">
                                </el-input>
                            </el-tooltip>

                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name ">银行账户</div>
                        <div class="form_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!info.bankAccount"
                                :content="info.bankAccount" placement="top">
                                <el-input placeholder="请输入内容" v-model="info.bankAccount" clearable class="public_input">
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name ">电话号码(对公)</div>
                        <div class="form_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!info.tel" :content="info.tel"
                                placement="top">
                                <el-input placeholder="请输入内容" v-model="info.tel" clearable class="public_input">
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name ">单位地址</div>
                        <div class="form_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!info.address" :content="info.address"
                                placement="top">
                                <el-input placeholder="请输入内容" v-model="info.address" clearable class="public_input">
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cell_box" v-if="checkArr.indexOf('2')!=-1" style="margin-top: 2.88vh">
                <div class="cell_title">
                    <div class="cell_name">附件:</div>
                </div>
                <div class="cell_cont">
                    <el-form style="
                        width: 100%;
                        margin-top: 5px;
                      " class="dqapForm" label-width="100px">
                        <el-form-item style="width: 100%" label="附件1">
                            <el-upload class="upload-demo" action="/Common/UploadFile?method=UploadFile&type=OSS"
                                :show-file-list="false" :before-upload="beforeUpload" accept=".png,.jpg,.jpeg,.pdf,.PDF"
                                name="upfile" :on-success="onSuccess.bind(null, { index: '1', data: '', type: 'fj' })
                          " multiple>
                                <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                                <p style="color: red;">企业资质证书</p>
                            </el-upload>
                            <div class="imgBox">
                                <div v-for="(item, index) in fileList" :key="index" class="imgList">
                                    <img @click="closeBtn(index)" class="close" src="../img/close.png" alt="" />
                                    <img class="img" @click="loadFj(item.fileUrl,'img')" v-if="
                                item.fileName.split('.')[item.fileName.split('.').length - 1] != 'pdf'
                              " :src="item.fileUrl" alt="" />
                                    <img class="img" v-else @click="loadFj(item.fileUrl,'pdf')" src="../img/pdfLogo.png"
                                        alt="" />
                                    <div class="imgBox-name">{{ item.fileName }}</div>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item style="width: 100%" label="附件2">
                            <el-upload class="upload-demo" action="/Common/UploadFile?method=UploadFile&type=OSS"
                                :show-file-list="false" :before-upload="beforeUpload" accept=".png,.jpg,.jpeg,.pdf,.PDF"
                                name="upfile" :on-success="onSuccess1.bind(null, { index: '1', data: '', type: 'fj' })
                          " multiple>
                                <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                                <p style="color: red;">企业安全生产许可证</p>
                            </el-upload>
                            <div class="imgBox">
                                <div v-for="(item, index) in fileList1" :key="index" class="imgList">
                                    <img @click="closeBtn1(index)" class="close" src="../img/close.png" alt="" />
                                    <img class="img" @click="loadFj(item.fileUrl,'img')" v-if="
                                item.fileName.split('.')[item.fileName.split('.').length - 1] != 'pdf'
                              " :src="item.fileUrl" alt="" />
                                    <img class="img" v-else @click="loadFj(item.fileUrl,'pdf')" src="../img/pdfLogo.png"
                                        alt="" />
                                    <div class="imgBox-name">{{ item.fileName }}</div>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="but_box">
            <el-button @click="cancels" class="cancelClass">取消</el-button>
            <el-button @click="confirms" type="primary" style="margin-left: 120px">提交</el-button>
        </div>
        <ul id="jq22" style="opacity: 0;height: 0;overflow: hidden;">
            <li v-for="(item, index) in previewList" :key="index"><img :src="item" /></li>
        </ul>
    </div>
    <script src="../js/public.js?1234"></script>
    <script>
        var layer = layui.layer;
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    showApp: false,
                    input: '',
                    companyId: '',
                    gysTypeData: [],
                    gysId: '',
                    fileList: [],
                    fileList1: [],
                    checkArr: [],
                    previewList: [],
                    info: {
                        name: '',
                        principalName: '',
                        principalPhone: '',
                        linkName: '',
                        linkPhone: '',
                        invoice: '',
                        buslicense: '',
                        bankName: '',
                        tel: '',
                        bankAccount: '',
                        address: ''
                    },
                    allObj: {
                        name: '请输入名称',
                        principalName: '请输入负责人',
                        principalPhone: '请输入负责人电话',
                        linkName: '请输入联系人',
                        linkPhone: '请输入联系人电话',
                        // invoice: '请输入发票抬头',
                        // buslicense: '请输入营业执照编码',
                        // bankName: '请输入开户银行',
                        // tel: '请输入电话号码(对公)',
                        // bankAccount: '请输入银行账户',
                        // address: '请输入单位地址'
                    }
                };
            },
            methods: {
                cancels() {
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                },
                loadFj(item, type) {
                    if (type == "pdf") {
                        parent.layer.open({
                            type: 2,
                            title: 'pdf预览',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['98%', '98%'],
                            content: '/ApsPublic/pdf/web/viewer.html?file=' + encodeURIComponent(item),
                            end: function () { }
                        });
                    } else {
                        this.previewList = [item];
                        setTimeout(function () {
                            var viewer = new Viewer(document.getElementById('jq22'), {
                                hide: function () {
                                    viewer.destroy();
                                }
                            });
                            viewer.show();
                        }, 10);
                    }
                },
                confirms() {
                    if (this.checkArr.length == 0) {
                        this.$message({
                            message: '请选择类型',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    for (var i in this.allObj) {
                        if (this.info[i].length == 0) {
                            this.$message({
                                message: this.allObj[i],
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                    }
                    if (!PhoneValidate(this.info.principalPhone)) {
                        this.$message({
                            message: '请输入正确的负责人手机号码',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (!PhoneValidate(this.info.linkPhone)) {
                        this.$message({
                            message: '请输入正确的联系人手机号码',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (!BankcardValidate(this.info.bankAccount)) {
                        this.$message({
                            message: '请输入正确的银行账户',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    var partnerTypeId = ''
                    var that = this
                    var data = {}
                    data = this.info
                    var uploadFile = []
                    var uploadFile2 = []
                    if (this.checkArr.indexOf("2") != -1) {
                        if (this.fileList.length != 0) {
                            for (var i = 0; i < this.fileList.length; i++) {
                                uploadFile.push(this.fileList[i].fileId + ',' + this.fileList[i].fileName + ',' + this.fileList[i].userName + ',' + this.fileList[i].uploadTime)
                            }
                            data['uploadFile'] = uploadFile.join('|');
                        }
                        if (this.fileList1.length != 0) {
                            for (var i = 0; i < this.fileList1.length; i++) {
                                uploadFile2.push(this.fileList1[i].fileId + ',' + this.fileList1[i].fileName + ',' + this.fileList1[i].userName + ',' + this.fileList1[i].uploadTime)
                            }
                            data['uploadFile2'] = uploadFile2.join('|');
                        }

                    }
                    data.partnerTypeId = this.checkArr.join(',')
                    data.companyId = this.companyId
                    data.id = this.gysId
                    xLoading(true, '正在提交')
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/ConstructionPlan/EditPartner',
                        data: JSON.stringify(data),
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.$message({
                                message: '已提交',
                                type: 'success'
                            });
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layer.close(index);
                            }, 500)
                        }
                    });
                },
                beforeUpload() {
                    xLoading(true, '正在上传')
                },
                closeBtn(index) {
                    this.$confirm("确定删除？", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            this.fileList.splice(index, 1);
                        })
                        .catch(() => { });
                },
                closeBtn1(index) {
                    this.$confirm("确定删除？", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            this.fileList1.splice(index, 1);
                        })
                        .catch(() => { });
                },
                onSuccess(data, res, file) {
                    if (res.success) {
                        this.fileList.push({
                            fileId: res.data.fileId,
                            fileName: res.data.fileName,
                            fileUrl: res.data.ossUrl,
                            uploadTime: res.data.uploadTime,
                            userName: res.data.userName
                        });
                        xLoading(false)
                        this.$message.success("上传成功");
                    } else {
                        xLoading(false)
                        this.$message.error(res.msg);
                    }
                },
                onSuccess1(data, res, file) {
                    if (res.success) {
                        this.fileList1.push({
                            fileId: res.data.fileId,
                            fileName: res.data.fileName,
                            fileUrl: res.data.ossUrl,
                            uploadTime: res.data.uploadTime,
                            userName: res.data.userName
                        });
                        xLoading(false)
                        this.$message.success("上传成功");
                    } else {
                        xLoading(false)
                        this.$message.error(res.msg);
                    }
                },
                getGysType() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/ConstructionPlan/GetPartnerTypeList',
                        data: {},
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.gysTypeData = res.data
                        }
                    });
                },
                getdetail() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/ConstructionPlan/GetPartner',
                        data: JSON.stringify({
                            id: that.gysId
                        }),
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.info = {
                                name: res.data.name,
                                principalName: res.data.principalname,
                                principalPhone: res.data.principalphone,
                                linkName: res.data.linkname,
                                linkPhone: res.data.linkphone,
                                invoice: res.data.invoice,
                                buslicense: res.data.buslicense,
                                bankName: res.data.bankname,
                                tel: res.data.tel,
                                bankAccount: res.data.bankaccount,
                                address: res.data.address,
                                status: res.data.status,
                                createname: res.data.createname,
                                createtime: res.data.createtime
                            }
                            if (res.data.uploadfile.length > 0) {
                                for (var i = 0; i < res.data.uploadfile.split('|').length; i++) {
                                    that.fileList.push({
                                        fileId: res.data.uploadfile.split('|')[i].split(',')[0],
                                        fileName: res.data.uploadfile.split('|')[i].split(',')[1],
                                        fileUrl: '/DataInput/FileService?method=DownloadFile&fileid=' + res.data.uploadfile.split('|')[i].split(',')[0],
                                        uploadTime: res.data.uploadfile.split('|')[i].split(',')[3],
                                        userName: res.data.uploadfile.split('|')[i].split(',')[2],
                                    })
                                }
                            }
                            if (res.data.uploadfile2.length > 0) {
                                for (var i = 0; i < res.data.uploadfile2.split('|').length; i++) {
                                    that.fileList1.push({
                                        fileId: res.data.uploadfile2.split('|')[i].split(',')[0],
                                        fileName: res.data.uploadfile2.split('|')[i].split(',')[1],
                                        fileUrl: '/DataInput/FileService?method=DownloadFile&fileid=' + res.data.uploadfile2.split('|')[i].split(',')[0],
                                        uploadTime: res.data.uploadfile2.split('|')[i].split(',')[3],
                                        userName: res.data.uploadfile2.split('|')[i].split(',')[2],
                                    })
                                }
                            }
                            if (res.data.partnertypeid.length > 0) {
                                that.checkArr = res.data.partnertypeid.split(',')
                            }
                        }
                    });
                },
            },
            mounted() {
                this.showApp = true;
                window.onkeypress = (event) => {
                    if (event.keyCode == 32) event.returnValue = false
                }
                this.companyId = getQuerys('companyId')
                this.gysId = getQuerys('gysId')
                this.getGysType()
                this.getdetail()
            }
        });
    </script>
</body>
<style>
    .contetn_box {
        width: 100%;
        height: calc(100% - 70px);
        overflow: auto;
        padding: 2.88vh 4.15vw 4.32vh;
    }

    .cell_cont {
        padding: 4.32vh 4.15vw;
        border: 1px solid #ebebeb;
        overflow: hidden;
    }

    .cell_box {
        width: 100%;
    }

    .cell_title {
        display: flex;
        align-items: center;
        padding: 10px 0;
    }

    .form_box {
        float: left;
        width: 50%;
        display: flex;
        margin-top: 2.88vh;
    }

    .form_name {
        width: 130px;
        min-width: 130px;
        text-align: right;
        padding-right: 10px;
        line-height: 32px;
    }

    .form_cont {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .el-checkbox {
        line-height: 32px;
    }

    .imgBox {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;

    }

    .imgBox .close {
        width: 20px;
        cursor: pointer;
        position: absolute;
        right: -10px;
        top: -10px;
        color: red;
    }

    .imgBox .imgList {
        width: 150px;
        position: relative;
        border: 2px solid #333;
        padding: 10px;
        cursor: pointer;
        margin-bottom: 10px;
        margin-left: 3%;
        border-radius: 5px;
        box-sizing: border-box;
    }

    .imgBox .img {
        width: 100%;
    }

    .imgBox-name {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 20px;
    }
</style>

</html>